<template>
  <div class="bpl2-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/wq-text-yq.png" alt="" />
      </div>
      <!-- <div class="co-title-right">
        <div class="co-title-unit">单位：件</div>
      </div> -->
    </div>
    <div class="bpl-container">
      <div class="bpl2-left">
        <div class="bpl2-l-title">工业用地地均增加值</div>
        <div class="bpl2-l-center">
          <!-- <div class="bpl2-lc-per">{{ percent }}<span>%</span></div>
          <div class="bpl2-lc-name">办结/登记</div> -->
          <div class="bpl2-lc-num">{{ percent }}</div>
        </div>
        <div class="circle-petal" :class="'circle-petal-light' + lightLeval">
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i
          ><i></i><i></i><i></i><i></i><i></i>
        </div>
        <div class="bpl2-l-pic1"></div>
        <div class="bpl2-l-pic2"></div>
      </div>
      <div class="bpl2-right">
        <div class="yq-item">
          <div class="left">
            <img src="@/assets/cockpit/subdivision/wq-icon-yq.png" alt="" />
          </div>
          <div class="right">
            <p class="text">科研用地占比</p>
            <p class="num">27.35%</p>
          </div>
        </div>
        <div class="yq-item">
          <div class="left">
            <img src="@/assets/cockpit/subdivision/wq-icon-yq.png" alt="" />
          </div>
          <div class="right">
            <p class="text">平均通勤时间</p>
            <p class="num">27.3<span class="mini-size">小时</span></p>
          </div>
        </div>
      </div>
    </div>

    <div class="row-line"></div>

    <div class="floorage-area">
      <div class="floorage-tabs">
        <div :class="isActive === 1 ? 'active' : ''" @click="clickActive(1)">建设用地总规模</div>
        <div :class="isActive === 2 ? 'active' : ''" @click="clickActive(2)">高新技术企业数量</div>
      </div>
      <div class="floorage-echart-box" id="floorageEchart"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'
@Component({
  name: 'Item2',
  components: {}
})
export default class Item2 extends Vue {
  private num = 15
  private total = 20
  private percent = 90
  private lightLeval = 0
  private isActive = 1

  clickActive(type: number) {
    this.isActive = type
  }

  mounted() {
    this.countPercent()
    this.initVillage2()
  }
  countPercent() {
    // this.percent = Number(((this.num / this.total) * 100).toFixed(2))
    // console.log(this.percent)
    if (this.percent === 0) {
      this.lightLeval = 0
    } else if (this.percent > 0 && this.percent <= 5) {
      this.lightLeval = 1
    } else if (this.percent > 5 && this.percent <= 10) {
      this.lightLeval = 2
    } else if (this.percent > 10 && this.percent <= 15) {
      this.lightLeval = 3
    } else if (this.percent > 15 && this.percent <= 20) {
      this.lightLeval = 4
    } else if (this.percent > 20 && this.percent <= 25) {
      this.lightLeval = 5
    } else if (this.percent > 25 && this.percent <= 30) {
      this.lightLeval = 6
    } else if (this.percent > 30 && this.percent <= 35) {
      this.lightLeval = 7
    } else if (this.percent > 35 && this.percent <= 40) {
      this.lightLeval = 8
    } else if (this.percent > 40 && this.percent <= 45) {
      this.lightLeval = 9
    } else if (this.percent > 45 && this.percent <= 50) {
      this.lightLeval = 10
    } else if (this.percent > 50 && this.percent <= 55) {
      this.lightLeval = 11
    } else if (this.percent > 55 && this.percent <= 60) {
      this.lightLeval = 12
    } else if (this.percent > 60 && this.percent <= 65) {
      this.lightLeval = 13
    } else if (this.percent > 65 && this.percent <= 70) {
      this.lightLeval = 14
    } else if (this.percent > 70 && this.percent <= 75) {
      this.lightLeval = 15
    } else if (this.percent > 75 && this.percent <= 80) {
      this.lightLeval = 16
    } else if (this.percent > 80 && this.percent <= 85) {
      this.lightLeval = 17
    } else if (this.percent > 85 && this.percent <= 90) {
      this.lightLeval = 18
    } else if (this.percent > 90 && this.percent <= 95) {
      this.lightLeval = 19
    } else if (this.percent > 95 && this.percent <= 100) {
      this.lightLeval = 20
    }
  }

  initVillage2() {
    const myChart = echarts.init(document.getElementById('floorageEchart') as HTMLElement)
    myChart.setOption({
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '0%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [
          '湘江新区',
          '长沙高新区',
          '长沙经开区',
          '宁乡经开区',
          '浏阳经开区',
          '金霞经开区',
          '雨花经开区',
          '宁乡高新区',
          '隆平高科技园',
          '隆平高科技园'
        ],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },

        axisLabel: {
          show: true,
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: ['#000000'],
            width: 0,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177',
            width: 0 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          data: [8, 7, 3, 14, 16, 19, 10, 8, 60, 80],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3DC8FC'
              },
              {
                offset: 0.5,
                color: '#1C96EF'
              },
              {
                offset: 1,
                color: '#245ABF'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl2-bg {
  width: 100%;
  height: 100%;
  padding: 12px 30px 12px 16px;
  // background: url('~@/assets/cockpit/bpl1-bg.png') no-repeat right center/ 99.3% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 103%;
    background: url('~@/assets/cockpit/bpl-bg-line.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.co-title-unit {
  font-size: 12px !important;
  line-height: 20px;
  color: #dffeff;
}
.bpl-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: auto !important;
}
@font-face {
  font-family: DINAlternateBold;
  src: url('~@/assets/cockpit/DINAlternateBold.ttf');
}
.bpl2-left {
  flex: none;
  width: 48%;
  height: 152;
  position: relative;
  .bpl2-l-title {
    font-size: 14px !important;
    line-height: 20px;
    color: #bffeff;
    text-align: center;
  }
  .bpl2-l-center {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 57px;
    z-index: 10;
    .bpl2-lc-per {
      width: 83px;
      height: 44px;
      padding: 8px 24px 8px 10px;
      background: url('~@/assets/cockpit/bpl2-lc-per.png') no-repeat 0/ 100% 100%;
      font-family: DINAlternateBold;
      font-size: 20px !important;
      line-height: 24px;
      color: #fff;
      text-align: center;
      margin: 0 auto -6px;
      > span {
        font-family: DINAlternateBold;
        font-size: 12px !important;
        color: #fff;
      }
    }
    .bpl2-lc-name {
      font-size: 12px !important;
      line-height: 20px;
      color: #bffeff;
      text-align: center;
    }
    .bpl2-lc-num {
      font-size: 16px !important;
      line-height: 20px;
      color: #fff;
      text-align: center;
    }
  }
  .bpl2-l-pic1 {
    width: 80px;
    height: 40px;
    background: url('~@/assets/cockpit/bpl2-l-pic1.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translate(-50%, 0);
    z-index: 5;
  }
  .bpl2-l-pic2 {
    width: 184px;
    height: 121px;
    background: url('~@/assets/cockpit/bpl2-l-pic2.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, 0);
    z-index: 5;
  }
}
.bpl2-right {
  flex: none;
  width: 40%;
  margin-top: 40px;
  .yq-item {
    display: flex;
    .left {
      width: 48px;
      img {
        width: 100%;
      }
    }
    .right {
      margin: 4px 8px;
      .text {
        color: #bffeff;
      }
      .num {
        font-size: 20px !important;
        color: #fff;
        .mini-size {
          font-size: 14px !important;
        }
      }
    }
  }
}
//
.row-line {
  width: 98%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 20px auto 0 auto;
}
.floorage-tabs {
  font-size: 14px !important;
  text-align: center;
  color: #fff;
  display: flex;
  margin: 15px auto;
  .active {
    color: #fff;
    font-weight: 500;
    font-size: 14px !important;
    background: url('~@/assets/cockpit/subdivision/text-bg.png') no-repeat 0/ 100% 100%;
    opacity: 1 !important;
  }
  div {
    width: 136px;
    height: 26px;
    line-height: 26px;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    cursor: pointer;
  }
}
.floorage-echart-box {
  width: 100%;
  height: 150px;
  margin-top: 24px;
}
</style>
